<template>
    <div>
        <div>
        <router-view></router-view>
        </div>
        <footer-nav id="foot" :showNav="showNav"></footer-nav>
    </div>
</template>

<script>
import { footerNav } from './components'
import { mapActions, mapMutations } from 'vuex'

export default {
    name: 'app',
    data() {
        return {
            showNav:true
        }
    },
    components: {
        footerNav
    },
    watch: {
        // 如果路由有变化，会执行该方法
        '$route': function() {
        this.routeChange()
        }
    },
    created(){
        this.init();
        this.routeChange();
    },
    update(){
        this.stateChange();
    },
    methods:{
        init(){           
            
        },
        routeChange () {
            let path = this.$route.path
            if (path === '/' || path === '/class' || path === '/classpub') {
                setTimeout(function(){
                    let foot = document.getElementById('foot')
                    foot.style.display="block"
                    this.showNav = true
                 }.bind(this))
            } else {
              
               setTimeout(function(){
                   let foot = document.getElementById('foot')
                    foot.style.display="none"
                    this.showNav = false
                }.bind(this))
            }
        },
        stateChange(){
            console.log("state changed");
        }
    },
}
</script>

<style scoped>
</style>
